@function rem($px) {
    @return $px/100px + rem
};

@mixin ellicpsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

@mixin _prefixDpr($width: 1px, $position: all, $color: #ebebeb, $radius: 0, $style: solid,  $dpr: 2) {
  @media only screen and (-webkit-min-device-pixel-ratio:$dpr) {
      @if $position == all {
          &::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              box-sizing: border-box;
              width: $dpr *100%;
              height: $dpr *99.5%;
              transform: scale(1/$dpr);
              transform-origin: 0 0;
              border: $width $style $color;
              border-radius: $radius * 2;
              pointer-events: none;
              z-index: 2;
          }
      } @else if $position == top {
          &::before {
              content: '';
              position: absolute;
              left: 0;
              top: 0;
              right: 0;
              height: 1px;
              border-#{$position}: $width $style $color;
              color: $color;
              transform-origin: 0 100%;
              transform: scaleY(1/$dpr);
              z-index: 2;
          }
      } @else if $position == right{
          &::after {
              content: '';
              position: absolute;
              right: 0;
              top: 0;
              bottom: 0;
              width: 1px;
              border-#{$position}: $width $style $color;
              color: $color;
              transform-origin: 100% 0;
              transform: scaleX(1/$dpr);
              z-index: 2;
          }
      } @else if $position == bottom {
          &::after {
              content: '';
              position: absolute;
              left: 0;
              bottom: 0;
              right: 0;
              height: 1px;
              border-#{$position}: $width $style $color;
              color: $color;
              transform-origin: 0 100%;
              transform: scaleY(1/$dpr);
              z-index: 2;
          }
      } @else if $position == left {
          &::before {
              content: '';
              position: absolute;
              left: 0;
              top: 0;
              width: 1px;
              bottom: 0;
              border-#{$position}: $width $style $color;
              color: $color;
              transform-origin: 100% 0;
              transform: scaleX(1/$dpr);
              z-index: 2;
          }
      }
  }
}

@mixin border($position: all, $color: #ebebeb, $width: 1px,  $radius: 0, $style: solid) {
    position: relative;
    border-radius: $radius;
    @include _prefixDpr($width, $position, $color, $radius, $style, 1);
    @include _prefixDpr($width, $position, $color, $radius, $style, 1.5);
    @include _prefixDpr($width, $position, $color, $radius, $style, 2);
    // @include _prefixDpr($width, $position, $color, $radius, $style, 3);
}
